<template>
    <el-form label-position="right" :rules="rules" ref="ruleFormRef" label-width="100" style="max-width: 600px"
        :model="addList" class="demo-form-inline">
        <el-form-item label="id" prop="id">
            <el-input v-model="addList.id" placeholder="请输入id" clearable />
        </el-form-item>
        <el-form-item label="商品" prop="name">
            <el-input v-model="addList.name" placeholder="请输入商品名称" clearable />
        </el-form-item>
        <el-form-item label="规格" prop="specification">
            <el-input v-model="addList.specification" placeholder="请输入规格" clearable />
        </el-form-item>
        <el-form-item label="单价" prop="price">
            <el-input v-model="addList.price" placeholder="请输入价格" clearable />
        </el-form-item>
        <el-form-item label="数量" prop="num">
            <el-input v-model="addList.num" placeholder="请输入数量" clearable />
        </el-form-item>
        <el-form-item label="地址" prop="select">
            <el-select v-model="addList.selcet" placeholder="请选择地址">
                <el-option label="上海" value="shanghai" />
                <el-option label="北京" value="beijing" />
            </el-select>
        </el-form-item>
        <el-form-item label="多选" prop="type">
            <el-checkbox-group v-model="addList.type" prop="type">
                <el-checkbox value="1" name="type">1</el-checkbox>
                <el-checkbox value="2" name="type">2</el-checkbox>
                <el-checkbox value="3" name="type">3</el-checkbox>
                <el-checkbox value="4" name="type">4</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="时间" required>
            <el-col :span="11">
                <el-form-item prop="date1">
                    <el-date-picker v-model="addList.date1" type="date" label="日期" placeholder="请选择日期"
                        style="width: 100%" />
                </el-form-item>
            </el-col>
            <el-col class="text-center" :span="2">
                <span class="text-gray-500"></span>
            </el-col>
            <el-col :span="11">
                <el-form-item prop="date2">
                    <el-time-picker v-model="addList.date2" label="时间" placeholder="请选择时间" style="width: 100%" />
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="单选" prop="radio">
            <el-radio-group v-model="addList.radio">
                <el-radio value="Sponsorship">A</el-radio>
                <el-radio value="Venue">B</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="输入" prop="desc">
            <el-input v-model="addList.selcet" type="textarea" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button plain @click="reset()">清空</el-button>
        </el-form-item>
        <el-button @click="get">get请求</el-button>
        <el-button @click="post">post请求</el-button>
        <el-button v-for="(item, index) in data" :key="index">
            名称：{{ item.name }}
            价格：￥{{ item.price }}
        </el-button>
    </el-form>
    {{ t('title') }}
    {{ t('name') }}
    <el-button @click="en">英文</el-button>
    <el-button @click="zh">中文</el-button>
</template>

<script setup>
const { locale, t } = useI18n();
const data = ref(null)
const ruleFormRef = ref(null)
const addList = reactive({
    id: null,
    name: '',
    specification: [],
    price: '',
    num: '',
    select: '',
    desc: '',
    type: [],
    date1: '',
    date2: '',
    radio: '',
})
const rules = reactive({
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' }
    ],
    num: [
        { required: true, message: '逆天', trigger: 'blur' },
        { min: 2, max: 5, message: '请输入正确的数值', trigger: 'blur' }
    ],
    select: [
        { required: true, message: '请选择地址', trigger: 'blur' },
    ],
    type: [
        { type: 'array', required: true, message: '请选择', trigger: 'change' },
    ],
    desc: [
        { required: true, message: '请输入备注', trigger: 'blur' },
    ],
    date1: [
        { type: 'date', required: true, message: '请选择日期', trigger: 'change', },
    ],
    date2: [
        { type: 'date', required: true, message: '请选择时间', trigger: 'change', },
    ],
    radio: [
        { required: true, message: '请选择', trigger: 'change', },
    ]
})
const submit = () => {
    ruleFormRef.value.validate((valid) => {
        if (valid)
            alert('成功')
        else
            alert('失败')
    })
}

import { useI18n } from 'vue-i18n'
import { ref, reactive } from 'vue'
import axios from 'axios'

function en() {
    locale.value = 'en'
}
function zh() {
    locale.value = "zh-cn"
}
//axios调用 get方法
function get() {
    axios.get('/api/login.json').then((res) => {
        console.log(res.data.proList);
        data.value = res.data.proList
    }).catch((err) => {
        console.log(err);
    })
}

//axios调用 post方法
function post() {
    axios.post('http://www.abc.com.a', {
        id: 123,
        name: 456
    }).then((res) => {
        console.log(res);
    }).catch((err) => {
        console.log(err);
    })
}

function reset() {
    ruleFormRef.value.resetFields();
}
</script>

<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>